<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref, computed, onMounted } from "@vue/runtime-core"
import { useStoriesStore } from '@/store'

interface Site {
    adds: string
    name1: string
    name2: string
    name3: string
    number: string
    checked: boolean
    nikeName: string
}

const store = useStoriesStore()
const { obj, cartList, getJiesuan } = store
const show = ref(true)
const sitelist = ref<Site[]>([])

const keepTwoDecimalFull = (num: any) => {
    let result = parseFloat(num);
    if (isNaN(result)) {
        return false;

    }
    result = Math.round(num * 100) / 100;
    let s_x = result.toString(); //将数字转换为字符串

    let pos_decimal = s_x.indexOf('.'); //小数点的索引值


    // 当整数时，pos_decimal=-1 自动补0  
    if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += '.';

    }

    // 当数字的长度< 小数点索引+2时，补0  
    while (s_x.length <= pos_decimal + 2) {
        s_x += '0';

    }
    return s_x;

}

const sumPrice = computed(() => {
    return cartList.filter((item: { finish: any; }) => item.finish).reduce((pre: number, cur: { jiage: string; num: number; }) => {
        return pre += ((parseFloat(cur.jiage) * 100) * cur.num) / 100
    }, 0)
})

onMounted(() => {
    let arr = localStorage.sitelist
    if (arr) {
        sitelist.value = JSON.parse(arr)
    }
})

</script>

<template>
    <div class="box">
        <div class="top">
            <div class="fanhui" @click="$router.go(-1)">&lt;</div>
            <div class="queren">确认订单</div>
            <div class="gouwuche"></div>
        </div>

        <div class="address" v-if="(sitelist.length == 0)">请选择地址</div>

        <div class="address" @click="$router.push({ path: '/address' })" v-if="(sitelist.length != 0)">
            <div class="name" style="display: flex; margin-left: 5px;">
                <div>{{ sitelist[0].nikeName }}</div>
                <div style="margin-left: 5px;">{{ sitelist[0].number }}</div>
            </div>
            <div class="ipbox" style="margin-left: 5px;">
                {{ sitelist[0].name1 }}{{ sitelist[0].name2 }}{{ sitelist[0].name3 }} {{ sitelist[0].adds }}
            </div>
        </div>

        <div class="color"></div>

        <div class="detail-box" v-if="(cartList.length != 0)">
            <ul class="goods-list">
                <li class="list" v-for="(c, i) in cartList" :key="i">
                    <div class="show-goods">
                        <div class="goods">
                            <div class="left-img">
                                <img :src="c.img">
                            </div>
                            <div class="right">
                                <div class="right-box">
                                    <div class="title">{{ c.title }}</div>
                                    <div class="sizess">颜色: <span style="color: #f46;">{{ c.seletedcolor }}</span> 尺码:
                                        <span style="color: #f46;">{{ c.chima }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="price-box">
                                <div style="color: #f46;">¥{{ c.jiage }}</div>
                                <div style="color: #666; font-size: 12px;">X{{ c.num }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bar">
                        <div class="lump-sum">总价: <span class="total-price">¥{{ sumPrice }}</span>
                        </div>
                        <div class="sub">
                            <span class="lump-num">共{{ c.num }}件商品</span>
                            <div class="submi" @click="getJiesuan">支付</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bor"></div>
        <div class="foot">
            <div class="freight-box" style="margin-bottom: 25px;">
                <div class="freight">快递运费 <span style="font-size: 12px; color: #666;">默认快递</span></div>
            </div>
            <div class="accident-box" style="margin-bottom: 25px; margin-left: 5px;">
                <div class="accident">意外换新 <span style="font-size: 12px; color: #666;">衣服出现意外破损可换新</span></div>
            </div>
            <div class="accident-box" style="margin-bottom: 25px; margin-left: 5px;">
                <div class="accident">退货补运费 <span
                        style="font-size: 12px; color: #666;margin-left: 160px;">退货预计补贴7.00</span></div>
            </div>
            <div class="accident-box" style="margin-bottom: 25px; margin-left: 5px;">
                <div class="accident">延误必赔 <span style="font-size: 12px; color: #666;margin-left: 177px;">商家赠送</span>
                </div>
            </div>
            <div class="accident-box" style="margin-bottom: 25px; margin-left: 5px;">
                <div class="accident">订单备注 <input type="text" style="width: 275px; height: 30px;"></div>
            </div>
            <!-- <div class="total">
                <div class="total-num">共{{ obj.num }}件</div>
                <div class="shop-total">店铺共计: <span class="total-price">¥{{ sumPrice
                }}</span></div>
            </div> -->
        </div>


    </div>
</template>

<style lang="scss" scoped>
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #ccc;

    .gouwuche {
        width: 25px;
        height: 20px;
        background-image: url(@/assets/img/gouwuche2.png);
        background-size: 25px 20px;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

.address {
    height: 60px;

    .name {
        margin-top: 3px;
    }

    .ipbox {
        margin-top: 15px;
    }
}

.color {
    width: 100vw;
    height: 8px;
    background-color: #ccc;
}

:deep(.distpicker-address-wrapper) {
    display: flex;
    width: 100vw;
    margin-left: 10px;
}

:deep(.distpicker-address-wrapper select) {
    padding: 0;
    height: 40px;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
}

.ipt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto;

    span {
        margin-left: 10px;
    }

    input {
        border: 1px solid #ccc;
        width: 260px;
        height: 30px;
        margin-left: 5px;
        margin-right: 13px;
    }
}

.queren1 {
    margin: 15px auto;
    width: 85px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f46;
    color: #fff;
}

.show-goods {
    margin-top: 10px;
    margin-bottom: 10px;

    .goods {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .left-img {
            width: 92px;
            height: 92px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            flex: 1;

            .right-box {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 5px;
                width: 200px;
                height: 100%;

                .title {
                    margin-bottom: 25px;
                    font-weight: bold;
                    font-size: 14px;
                }

                .sizess {
                    font-size: 12px;
                }
            }
        }
    }
}

.address-box2 {
    display: flex;
    height: 60px;
    align-items: center;

    .address-right {
        margin-left: 5px;
    }
}

.address-box {
    width: 100vw;
    height: 40px;
    line-height: 27px;
    margin-top: 10px;
    background-color: #fff;

    .address {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .xuanze {
        flex: 1;
    }
}

.detail-box {
    margin-top: 10px;
    margin-left: 5px;

    .shop {
        display: flex;
        align-items: center;

        .shop-name {
            margin-left: 5px;
        }
    }

    .shangpin-detail {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;

        .detail-img {
            flex: 0 0 69px;
            width: 69px;
            height: 92px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .detail-list {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 220px;

            .title {
                margin: 10px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .style {
                font-size: 12px;
                color: #666;
            }
        }

        .price-num {

            .price {
                margin: 8px 0;


            }

            .num {
                font-size: 12px;
                color: #666;
            }
        }
    }
}

.bor {
    display: block;
    border-bottom: 1px solid #ccc;
    margin-top: 8px;
    margin-left: 43px;
}

.freight-box {
    margin-top: 10px;
    margin-left: 5px;
}

.accident {

    input {
        height: .6rem;
        padding: .14rem .18rem;
        margin-left: .1rem;
        background: #f7f7f7;
        border: none;
        border-radius: .08rem;
        font-size: .24rem;
    }
}

.total {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .total-num {
        margin-right: 4px;
        color: #666;
        font-size: 12px;
    }

    .total-price {
        margin-right: 5px;
        color: #ff4466;
    }
}

.bar {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55px;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;

    .sub {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .lump-sum {


        .total-price {
            color: #ff4466;
        }
    }

    .submi {
        height: 50px;
        line-height: 50px;
        background-color: #ff4466;
        color: #fff;
        width: 80px;
        text-align: center;
    }
}
</style>